<template>
  <div class="app-container oneSearchNoFooter">
    <div class="customContainer ">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small"> 
        <el-form-item>
          <div>
            <span class="globalRow_distance">
              {{storeName}}</span>
            <span> {{house_type_name}}</span>
          </div>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="pickerDate" value-format="yyyy-MM-dd" type="daterange" align="right" unlink-panels range-separator="-"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
        <!-- <el-form-item>
          <el-tooltip class="item" effect="dark" placement="bottom-end">
            <div slot="content" style="line-height:20px;width:400px">
              剩余数量（个）:该门店的实际库存（主仓+中转仓+机台仓）
              <br> 金额（元）:该门店的实际库存价值的价格=礼品成本价*礼品数
            </div>
            <i class="el-icon-question"></i>
          </el-tooltip>
        </el-form-item> -->
      </el-form>
      <!-- 表格 -->
      <!-- <dj-simple-table :columns="tableColumns" :data="listData" :loading="listLoading" /> -->
      <el-table highlight-current-row sum-text="合计" :data="listData" v-loading.body="listLoading" border size="mini">
        <el-table-column v-for="(c,index) in tableColumns" :key="index" align="center" :label="c.label">
          <template slot-scope="scope">
            <a v-if="c.link" class="number_color" @click="handleDialog(c,scope.row)">
              <span v-if="c.isnum">
                {{(c.dtkey?scope.row[c.dtcol][c.dtkey]:scope.row[c.dtcol])|keepTwoNum}}
              </span>
              <span v-else>
                {{c.dtkey?scope.row[c.dtcol][c.dtkey]:scope.row[c.dtcol]}}
              </span>
            </a>
            <span v-else-if="c.isnum">
              {{(c.dtkey?scope.row[c.dtcol][c.dtkey]:scope.row[c.dtcol])|keepTwoNum}}
            </span>
            <span v-else>
              {{c.dtkey?scope.row[c.dtcol][c.dtkey]:scope.row[c.dtcol]}}
            </span>
          </template>
        </el-table-column>
      </el-table> 
    </div> 
    <!-- 出入库明细弹框 -->
    <el-dialog :title="operation == 1 ? '调整出库明细' : '调整入库明细'" :visible.sync="dialogVisible" width="80%">
      <div v-loading="dialogLoading">
        <div class="dialog_title">
          <span class="globalRow_distance">
            {{storeName}}</span>
          <span>{{operation == 1 ? '调整出仓库：': '调整入仓库：'}} {{house_type_name}}</span>
        </div>
        <dj-simple-table :columns="operation == 1 ? dialogColumnsOut : dialogColumnsIn" :data="dialogData" />
      </div>
      <div slot="footer" class="dialog-footer">
        <span class="dialog_distance mydialog_foot">调整{{operation == 1 ? '出' : '入'}}库数量合计(个): {{dialogNum}}</span>
        <span class="mydialog_foot">调整{{operation == 1 ? '出' : '入'}}库金额合计(元): {{dialogMoney | keepTwoNum}}</span>
      </div>

    </el-dialog>
  </div>
</template>
<script>
import { getList, getDetailList } from '@/api/report/stock_adjust_detail_form';
import { pickerOptionsF, pickerDateDot, optionMaxTime, getDateString } from '@/utils';
import { DjSimpleTable } from '@/components/table';
import { DjStoreSelect } from '@/components/store';
export default {
  components: {
    'dj-simple-table': DjSimpleTable,
    // 'dj-store-select': DjStoreSelect
  },
  data() {
    return {
      tableColumns: [
        {
          label: '序号',
          dtcol: 'index'
        },
        {
          label: '时间',
          dtcol: 'datetime'
        },
        {
          label: '调整入库数量(个)',
          dtcol: 'num_in', 
          link: '#'
        },
        {
          label: '调整入库金额(元)',
          dtcol: 'money_in',
          isnum: true,
          link: '#'
        },
        {
          label: '调整出库数量(个)',
          dtcol: 'num_out', 
          link: '#'
        },
        {
          label: '调整出库金额(元)',
          dtcol: 'money_out',
          isnum: true,
          link: '#'
        }
      ],
      listData: [],
      listLoading: false,
      formInline: {
        // store_id: this.$store.getters.optionId,
        start_time: '', //2019-11-01
        end_time: '', //2019-11-30
        look_del: '0',
        house_id:''
      },
      pickerOptions: pickerOptionsF(-1),
      pickerDate: pickerDateDot(-1,-1),
      // 出入库明细弹框
      dialogVisible: false,
      operation: '',
      dialogColumnsIn: [
        {
          label: '序号',
          dtcol: 'index'
        },
        {
          label: '礼品名称',
          dtcol: 'gift_name'
        },
        {
          label: '礼品编号',
          dtcol: 'gift_id'
        },
        {
          label: '神采编号',
          dtcol: 'gift_no_obsolete'
        },
        {
          label: '成本价(元)',
          dtcol: 'money_cost'
        },
        {
          label: '时间',
          dtcol: 'create_time'
        },
        {
          label: '调整入库数量(个)',
          dtcol: 'num', 
        },
        {
          label: '调整入库金额(元)',
          dtcol: 'in_money',
          isnum: true
        },
        {
          label: '操作人',
          dtcol: 'u_name'
        },
        {
          label: '调整原因',
          dtcol: 'reason'
        },
        {
          label: '备注',
          dtcol: 'remark'
        },
      ],
      dialogColumnsOut: [
        {
          label: '序号',
          dtcol: 'index'
        },
        {
          label: '礼品名称',
          dtcol: 'gift_name'
        },
        {
          label: '礼品编号',
          dtcol: 'gift_id'
        },
        {
          label: '神采编号',
          dtcol: 'gift_no_obsolete'
        },
        {
          label: '成本价(元)',
          dtcol: 'money_cost'
        },
        {
          label: '时间',
          dtcol: 'create_time'
        },
        {
          label: '调整出库数量(个)',
          dtcol: 'num', 
        },
        {
          label: '调整出库金额(元)',
          dtcol: 'in_money',
          isnum: true
        },
        {
          label: '操作人',
          dtcol: 'u_name'
        },
        {
          label: '调整原因',
          dtcol: 'reason'
        },
        {
          label: '备注',
          dtcol: 'remark'
        },
      ],
      dialogNum:0,
      dialogMoney:0.00,
      dialogData: [],
      dialogLoading: false,
      storeName:'',
      house_type_name:'',

    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      //当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
      vm.beforeComingIn();
    });
  },   
  methods: {
    beforeComingIn() {
      if (this.$route.query.routerflag) {
        // console.log(this.$route.query, 'zst1119 beforeComingIn route.query'); 
        let global = this.$route.query.global;
        let row = this.$route.query.row; 

        this.formInline.house_id = row.house_id
        this.formInline.start_time = global.start_time
        this.formInline.end_time = global.end_time
        this.pickerDate = [this.formInline.start_time,this.formInline.end_time]
        this.storeName = global.storeName;
        this.house_type_name = row.house_type_name; 
        this.searchClick();
      } else {
        if (!this.listData || this.listData.length == 0) {
          this.searchClick();
        }
      }
    },
    selectStoreChanged(obj) {
      for (let key in obj) this.formInline[key] = obj[key];
      this.searchClick();
    },
    // 搜索
    searchClick() {
      optionMaxTime(this.pickerDate).then(() => {
        //最大可选择时间区间
        this.formInline.start_time = this.pickerDate ? this.pickerDate[0] : '';
        this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
        this.fetchData();
      });
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      getList(this.formInline)
        .then(response => {
          // console.log(11, response); 
          if (!response) this.listData = [];
          else this.listData = response.data;
          let listData = this.listData; 
          if (listData.length > 0) {
            for (let key in listData) {
              listData[key].index = parseInt(key) + 1;
            } 
            this.listData = listData;
          }
          this.listLoading = false;
        })
        .catch(res => {
          this.listLoading = false;
        });
    }, 
    // 显示弹框
    handleDialog(c,row) {
      this.dialogVisible = true;
      this.dialogLoading = true;
      this.dialogNum = 0
      this.dialogMoney =0.00 
      // start_time: this.pickerDate ? this.pickerDate[0] : '',
        // end_time: this.pickerDate ? this.pickerDate[1] : '',
      let data = {
        start_time: row.datetime,
        end_time: row.datetime,
        house_id: this.formInline.house_id
      };
      if (c.dtcol == 'num_in' || c.dtcol == 'money_in') {
        this.operation = 0;
        data.type = 2;
      } else {
        this.operation = 1;
        data.type = 1;
      } 
      getDetailList(data)
        .then(response => {

          if (!response) this.dialogData = [];
          else this.dialogData = response.data;
          let listData = this.dialogData;
          if (listData.length > 0) { 
            for (let key in listData) {
              listData[key].index = parseInt(key) + 1;
              this.dialogNum += parseInt(listData[key].num)
              this.dialogMoney += parseFloat(listData[key].in_money)
            } 
            this.dialogData = listData;
          } 
          this.dialogLoading = false;
        })
        .catch(res => {
          this.dialogLoading = false;
        });
    },
  }
};
</script>
<style scoped>
.globalRow_distance {
  margin-right: 10px;
}
.dialog_distance {
  margin-right: 30px;
}
.number_color {
  color: #409eff;
}
.dialog_title {
  margin: -20px 0 20px 0;
}
.mydialog_foot { 
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}
</style>